<template>
  <div>
    <q-table
      :data="tableData"
      :columns="columns"
      hide-bottom
      class="stick-last-col"
      style="margin-top: 0"
      separator="cell"
      no-data-label="暂无数据"
      :pagination="{ rowsPerPage: 0 }"
      color="primary"
    >
      <template v-slot:header-cell-duration="props">
        <q-th>
          {{ props.col.label }}
          <q-icon
            name="iconfont icontubiao-72"
            class="font-18 text-grey"
            style="margin-left: 1px"
          >
            <q-tooltip
              >持续时长：持续时长为0，指参数的值达到阈值判断条件时，立刻触发报警；持续时长不为0，指参数的值达到阈值判断条件且持续时长满足设定条件，才会触发报警</q-tooltip
            >
          </q-icon>
        </q-th>
      </template>
      <template v-slot:header-cell-frequency="props">
        <q-th>
          {{ props.col.label }}
          <q-icon
            name="iconfont icontubiao-72"
            class="font-18 text-grey"
            style="margin-left: 1px"
          >
            <q-tooltip
              >消息推送频率：在此时间段内，无论触发多少次报警，只推送一次消息（避免因频繁报警，导致频繁的消息推送）</q-tooltip
            >
          </q-icon>
        </q-th>
      </template>
      <template v-slot:body-cell-pointCondition="{}">
        <td class="point-condition-td">
          <div v-if="!model.yzOperator" @click="addOperator">添加</div>
          <yzOperatorList
            v-if="model.yzOperator"
            v-model="model.yzOperator"
            :labelOptions="labelOptions"
            @updateRoot="updateRootOp"
          />
        </td>
      </template>
      <template v-slot:body-cell-duration="{}">
        <q-td class="duration">
          <div class="duration-div">
            <q-input
              v-model="model.duration"
              dense
              emit-value
              map-options
              outlined
              style="margin-top: -5px"
              :rules="[
                (val) => {
                  if (val === null || val === undefined || val === '') {
                    return '请输入'
                  }
                  if (!/^\d+$/g.test(val)) {
                    return '只能输入数字'
                  }
                  return null
                }
              ]"
            >
            </q-input>
            <label class="duration-label">s</label>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-frequency="{}">
        <q-td class="frequency">
          <q-select
            v-model="model.frequency"
            :options="frequencyOptions"
            dense
            options-dense
            lazy-rules
            class="form-select"
            emit-value
            map-options
            outlined
            style="margin-top: -5px"
            :rules="[
              (val) => {
                let msg = checkNotNull(val)
                if (msg.length > 0) {
                  return msg
                }
                return null
              }
            ]"
          >
            <template v-slot:no-option>
              <div class="no-option" />
            </template>
          </q-select>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script>
import { map2Operator } from 'src/boot/common/operatorUtils'
import yzOperatorList from 'src/components/common/yz-operator-list.vue'
export default {
  name: 'plc-threshold-set-dialog-multi',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    nameOptions: {
      type: Array,
      require: true
    },
    model: {
      type: Object,
      require: true
    },
    selectedLabels: {
      type: Array
    },
    editRuleFlag: {
      type: Boolean
    }
  },
  emit: ['close'],
  model: {
    prop: 'model',
    event: 'submit'
  },
  computed: {
    tableData () {
      if (this.show) {
        this.handleYzOperators()
        return [this.model]
      }
      return []
    },
    addr () {
      if (this.nameOptions) {
        let op = this.nameOptions.find(n => n.label === this.model.label)
        if (op) {
          return op.addr
        }
      }
      return ''
    },
    labelOptions () {
      if (this.selectedLabels) {
        let options = this.nameOptions ?? []
        return options.filter(o => !this.selectedLabels.includes(o.label))
      }
      return this.nameOptions ?? []
    }
  },
  data () {
    return {
      frequencyOptions: [
        { label: '全部推送', value: 0 },
        { label: '1分钟/次', value: 60 },
        { label: '3分钟/次', value: 3 * 60 },
        { label: '5分钟/次', value: 5 * 60 },
        { label: '10分钟/次', value: 10 * 60 },
        { label: '30分钟/次', value: 30 * 60 }
      ],
      columns: [
        {
          name: 'pointCondition',
          label: '判断条件',
          align: 'center',
          field: 'pointCondition'
        },
        {
          name: 'duration',
          label: '持续时长',
          align: 'center',
          field: 'duration'
        },
        {
          name: 'frequency',
          label: '消息推送频率',
          align: 'center',
          field: 'frequency'
        }
      ]
    }
  },
  methods: {
    updateRootOp (op) {
      console.log('root', op)
      this.model.yzOperator = op
    },
    addOperator () {
      // 默认给个==
      this.model.yzOperator = map2Operator(7, this.model.label, this.model.avalue, this.model.bvalue, this.model.yzOperator)
    },
    handleYzOperators () {
      // this.model.yzOperator = map2Operator(this.model.pointCondition, this.model.label, this.model.avalue, this.model.bvalue, this.model.yzOperator, false)
    },
    submit () {
      this.$emit('submit', this.model)
      this.$emit('close')
    },
    checkNotNull (val) {
      if (val === null || val === undefined || val.toString() === '') {
        return '不能为空'
      }
      return ''
    }
  },
  components: {
    yzOperatorList
  }
}
</script>
<style scoped lang="scss">
.point-condition {
  display: flex;
  padding-top: 10px;
  .input-value {
    width: 18%;
    margin-left: 2px;
  }
  .form-select-w {
    width: 20%;
    margin-left: 2px;
  }
}

.duration {
  padding-top: 10px;
  width: 100px;

  .duration-div {
    display: flex;

    input {
      width: 20%;
    }

    .duration-label {
      margin-left: 3px;
      font-size: 18px;
      margin-top: -5px;
      text-align: center;
      align-items: center;
    }
  }
}

.frequency {
  padding-top: 10px;
  width: 100px;
}
</style>
